<template>
   <div class="detail-bottom-left">
      
        <div class="fenlei fenlei2" 
       >
           <h1>热销排行榜</h1>
           <router-link 
           tag="a" target="_blank"
            :to="{name: 'productDetail', params: {id:item.id}}" 
            class="hot-item"
            v-for="(item,index) of litter" 
            :key="item.id" >
                <div class="num" v-if="index<=2">{{index+1}}</div>
               <div>
                   <img :src="item.main_img_url" alt="">
               </div>
               <p>{{item.name}}</p>
           </router-link>
           
       </div>
        
    </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios'

export default {
  name: 'productDetail-bottom',
  components:{
    
  },
  props:{
     
      litter:Array
  },
  data () {
    return {
        check:false,
        check2:false,
        // litter:[]
    }
  },
  watch:{
    prodcutName(){
    //    console.log(this.prodcutName)
       this.getInfo()
    }
  },
  computed:{
        ...mapState(['baseUrl'])
    },
  mounted() {
      
    
  },
  methods:{
        // slide(id){
        //     if(id===1){
        //         this.check = !this.check;
        //     }else if(id==2){
        //         this.check2 = !this.check2;
        //     }
            
        //     // console.log(this.check)
        // },
        // getInfo(){
     
        //     axios.get(this.baseUrl+'product/to_index_product',
        //         {
        //             params:{
        //                     categoryName:this.prodcutName
        //                     }                 
        //         }
        //     )
        // .then(this.getInfoSucc)
        // },
        // getInfoSucc(response){
        //     this.litter = response.data.litter          
        // }
  }
 
  
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
@import "~styles/mixins.styl"
img 
    width 100%
.detail-bottom-left
    width 300px
.fenlei
    border 1px solid #e3e4e6
.fenlei>h1
    border-bottom 1px solid #e3e4e6
    height 68px
    line-height 68px
    font-size 20px
    text-indent 30px
    background #f2f2f2
    font-weight bold
.slide
    
    border 1px solid #e3e4e6
.slide>p
    cursor pointer
    width 250px
    overflow hidden
    font-size 16px
    margin-left 30px
  
    padding 20px 0
.slide>p>span
    float left
    font-size 16px
.slide>p>i
    float right   
.show 
    overflow hidden
    margin-left 30px 
    transition all 0.3s
.show>a
    float left
    color #666666
    font-size 12px
    margin-right 60px
    padding 10px 0
.fenlei2
 margin-top 30px
 .fenlei2>a
    display block
    width 100%
.hot-item 
    position relative
    display block
.num 
    position absolute
    width 40px!important
    height 30px!important
    line-height 30px
    font-size 16px
    background #10abbe
    left 20px 
    top 10px
    margin 0!important
    text-align center
.hot-item>div
    width 280px
    height 210px
    margin 10px
    overflow hidden
.hot-item>div>img
    width 100%
.hot-item>p
    width 100%
    height 70px
    line-height 70px
    text-align center
    font-size 16px
    color #333333
    font-weight bold
</style>
